<template>
  <div class="progress-wrapper">
    <el-progress
      :percentage="percentage"
      :type="type"
      :stroke-width="strokeWidth"
      :text-inside="percentage >= 100 ? false : textInside"
      :status="progressStatus"
      :color="customColor"
      :show-text="showText"
      style="width: 100%"
      striped
    />
    <!-- <span v-if="showDetail" class="progress-detail">
      {{ current }} / {{ total }}
    </span> -->
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ElProgress } from "element-plus";

interface Props {
  current: number;
  total: number;
  type?: "line" | "circle" | "dashboard";
  strokeWidth?: number;
  textInside?: boolean;
  showText?: boolean;
  showDetail?: boolean;
  customColor?: string | ((percentage: number) => string);
}

const props = withDefaults(defineProps<Props>(), {
  type: "line",
  strokeWidth: 14,
  textInside: true,
  showText: true,
  showDetail: true,
});

const percentage = computed(() => {
  if (props.total === 0) return 0;
  const result = Math.round((props.current / props.total) * 100);
  return result;
});

const progressStatus = computed(() => {
  const percent = percentage.value;
  if (percent === 100) return "success";
  if (percent >= 80) return "warning";
  return undefined;
});
</script>

<style scoped lang="scss">
.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;

  .progress-detail {
    font-size: 12px;
    color: var(--el-text-color-regular);
    white-space: nowrap;
  }
}
</style>
